<template>
  <div class="index">
    <!-- 左侧导航 -->
    <div class="nav">
      <ul>
        <li>
        <router-link to="/discoeary">  <img src="../../Data/音乐.png" alt="" width="20px" height="20px">发现音乐</router-link>
         </li>
        <li>
          <router-link to="/playlists"><img src="../../Data/音乐(1).png" alt="" width="20px" height="20px">推荐歌单</router-link>
          </li>
        <li>
          <router-link to="/songs"><img src="../../Data/歌单.png" alt="" width="20px" height="20px">最新音乐</router-link>
         </li>
        <li>
          <router-link to="/mvs"><img src="../../Data/MV.png" alt="" width="20px" height="20px">最新mv</router-link>
          </li>
      </ul>
    </div>
    <!-- 右侧容器 -->
    <div class="main">
      <!-- <discoeary></discoeary> -->
      <!-- 路由的出口 地址命中之后 把组件显示的位置 -->
      <div class="audio">
        <!-- autoplay自动播放 -->
        <audio :src="musicUrl" controls autoplay class="new_audio"></audio>
        </div>
      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script>
import discoeary from './discoeary.vue'
export default {
  components:{
    discoeary,
  },
  data() {
    return {
      musicUrl: "http://m801.music.126.net/20210814115504/3940d112e251c343d2b08451ef96adea/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/10239189749/f1da/b5ec/c41d/2028069110bcd26571a70321177a6c1f.mp3",
    }
  },
  }
</script>

<style>
.audio{
  width: 100%;
  height: 50px;
  z-index:1;
  position:fixed;
  bottom:0;
}
.audio audio{
  width: 100%;
  height: 50px;
}
.index{
  display:flex;
  height: 600px;
}
.index .nav{
  width: 20%;
  background-color: #ededed;
}
.index .nav li{
  text-align:center;
  list-style:none;
  margin-bottom:50px;
}
.index .nav li:nth-child(1){
  margin-top:50px;
}
.main{
  background-color:#ededed;
  flex:1;
  height: 600px;
}
a{
  text-decoration: none;
}
/* 点击高亮的效果 */
a.router-link-active{
  color:white;
  background-color: orange;
  display:block;
  width: 100%;
  /* height: 50px; */
  border-radius:20px;
  text-align:center;
  /* line-height:50px; */
}
.icon-bofang-{
  width: 20px;
  height: 20px;
}
.nav li img{
  margin-right:5%;
  vertical-align:middle;
}
.new_audio{
  display:none;
}
.audio:hover .new_audio{
  display:block;
}
</style>